<template>
	<view class="wanlgroups-user-container">
		<view class="wanlgroups-user-container__head" :style="{ height: headHeight + 'px' }">
			<view
				class="background"
				v-if="headerOpacity > 0"
				:style="{
					height: headHeight + 'px',
					opacity: headerOpacity,
					backgroundColor: userData.color
				}"
			>
				<view class="bgcolor"></view>
			</view>
			<view
				class="navigater text-white"
				:style="{
					height: '20px',
					paddingTop:'20px'
				}"
			>
				<view class="text-xl">
					<view class="margin-right">
						<text class="wlIcon-fanhui1 text-bold" @tap="handleBack">求购信息</text>
					</view>
					<view class="text-cut" style="width: 100rpx;">
						<text
							class="text-lg"
							v-if="headerOpacity > 0"
							:style="{ opacity: headerOpacity }"
						>
							{{ userData.user.nickname }}
						</text>
					</view>
				</view>
				<view class="text-xl" @tap="showModal()">
					<!-- <text
						v-if="headerOpacity > 0 && !isMyfind && userData.isFollow === 0"
						:style="{ opacity: headerOpacity }"
						class="margin-right text-sm"
						@tap="handleFollow(userData.shop)"
					>
						+ 关注
					</text> -->
					<text class=" margin-right-xl text-bold"
						
						style="font-size: 14px;"
					/>
					发布信息
					</text>
					<!-- <text class="wlIcon-gengduo text-bold" @tap="showModal('menu')" /> -->
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<view
			class="wanlgroups-user-container__main"
			:style="{
				backgroundColor: userData.color,
				backgroundImage: `url(${$wanlshop.oss(
					userData.image,
					0,
					50,
					1,
					'transparent',
					'png'
				)})`
			}"
		>
			<view
				class="head text-white"
				:style="{ paddingTop:  '20px' }"
				@click="handleTheme"
			>
				
				</view>
			</view>
			<view class="cu-list menu-avatar">
				<view class="cu-item" v-for="(item, index) in dataList" :key="item.id" style="height: 300rpx;">
					<view class="content"  style="display:flex; justify-content: space-evenly;flex-direction: column;align-items: flex-start;height: 300rpx;left:10px"><view class="text-sm" >联系方式：{{item.mobile}}</view>
						<view class="text-sm" >备注：{{item.note}}</view>
						<view class="text-sm">时间：{{ timestampToTime(item.createtime) }}</view>
					</view>
					<view class="action" style="display:flex; justify-content: space-evenly;flex-direction: column;align-items: flex-end;height: 300rpx;width: 300rpx;margin: 0;margin-right: 20rpx;">
						<view class="wanl-text-yellow text-lg" style='border:#f5f5f5 solid 1px ;line-height:60upx;border-radius: 6upx;width: 200rpx;margin: 0;' v-if="item.show==1" @click="handleDel(item.id)">删除</view>
						
					</view>
				</view>
				
			</view>
			<view class="marke" v-show="seePoups">
				<view class="withdraw">
					<icon @click="seePoups=false" class="cancel" type="clear" size="24" color="#ccc"  ></icon>
					<view class="markeTitle">发布信息</view>
					<input class="moneyBox" type="digit" cursor-spacing="50px" placeholder="请填写联系方式"  :value="mobile" placeholder-class="tips"@blur="changemobile"/>
					<input class="moneyBox" type="digit" cursor-spacing="50px" placeholder="请填写备注"  :value="note" placeholder-class="tips"@blur="changenote"/>
					
					<button @click="tijiao">提交</button>
					
				</view>
			</view>
		</view>	
					</view>
					
				</view>
			</view>
		</view>
		<!-- 模态框 -->
		
			
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			seePoups:false,
			number:'',
			dataList: [],
			headHeight: 0,
			headerOpacity: 0,
			windowHeight: 0,
			headTop: 0,
			isMyfind: false,
			loadingFollow: false,
			modalName: null,
			scrollAnimation: 300,
			userData: {
				user_no: '',
				user: {
					avatar: '',
					nickname: '加载中..'
				},
				follow: 0,
				fans: 0,
				likes: 0,
				praised: 0,
				color: '#e9dacd',
				image: '',
				isFollow: 0
			},
			
			currentId: 0,
			typeList: {
				new: 'bg-gradual-yellow',
				live: 'wanl-bg-orange',
				want: 'bg-gradual-green',
				activity: 'bg-gradual-orange',
				show: 'wanl-bg-pink',
				video: 'wanl-bg-pink'
			},
			mobile:'',
			note:''
			
		};
	},
	computed: {
		...mapState(['common'])
	},
	onLoad(option) {
		// 计算页面尺寸
		let sys = this.$wanlshop.wanlsys();
		this.headTop = 20;
		this.headHeight = sys.height;
		this.windowHeight = sys.windowHeight;
		// 加载 Api
		
			this.loadData(option);
		
	},
	// 下拉刷新
	onReachBottom() {
		this.loadFindData();
	},
	onPageScroll(e) {
		let tmpY = 170;
		e.scrollTop = e.scrollTop > tmpY ? 170 : e.scrollTop;
		this.headerOpacity = e.scrollTop * (1 / tmpY);
	},
	methods: {
		async handleDel(e) {
			if (this.$store.state.user.isLogin) {
				uni.showModal({
					content: '确定要删除此信息？',
					success: res => {
						if (res.confirm) {
							
							this.$api.post({
								url: '/wanlshop/user/delmessage',
								data: {
									id: e
								},
								loadingTip: '删除中',
								success: del => {
									console.log(del)
									this.reload=true
									this.loadData();
									uni.showToast({
										title:"删除成功",
										icon:'none'
									})
								}
							});
						}
					}
				});
			} else {
				this.$wanlshop.to('/pages/user/auth/auth');
			}
		},
		tijiao(){
			if(this.mobile==''){
				uni.showToast({
					title:'请填写联系方式',
					icon:'none'
				})
				return false
			}
			// this.data
			this.$api.post({
				url: '/wanlshop/user/addmessage',
				data:{
					mobile:this.mobile,
					note:this.note
				},
				success: res => {
					//uni.stopPullDownRefresh();
					this.seePoups=false;
					this.loadData();
					this.reload=true
						uni.showToast({
							title:"发布成功",
							icon:'none'
						})
					
				}
			});
		},
		async loadData() {
			this.$api.post({
				url: '/wanlshop/user/messagelog',
				data: {
					page: this.current_page
				},
				success: res => {
					console.log(res)
					uni.stopPullDownRefresh();
					this.dataList = this.reload ? res.data : this.dataList.concat(res.data);//数据 追加
					this.total = res.total; //数据量
					this.current_page = res.current_page; //当前页码
					this.last_page = res.last_page; //总页码
					this.status = res.total == 0 ? 'noMore' : 'more';
				}
			});
		},
		timestampToTime(timestamp) {
			var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
			var D = (date.getDate() < 10 ?'0'+date.getDate():date.getDate()) + ' ';
			var h = date.getHours() + ':';
			var m = date.getMinutes() + ':';
			var s = date.getSeconds();
			return Y+M+D+h+m+s;
		},
	changemobile(e){
		this.mobile=e.detail.value
	},
	changenote(e){
		this.note=e.detail.value
	},
		
		// 弹出层
		showModal() {
			// 滚动下分享
			
			this.seePoups = true;
		},
		
	}
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}
.wanl-signin-log .cu-list.menu-avatar>.cu-item .content{
		left: 25rpx;
	}
.marke{
		width: 100%;
		height: 100%;
		position: fixed;
		top:0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		background: rgba(0,0,0,0.7);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.withdraw{
		width: 80%;
		background: #fff;
		border-radius: 20rpx;
		position: relative;
	}
	.markeTitle{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333;
		text-align: center;
		background: #f5f5f5;
		border-radius: 20rpx 20rpx 0 0;
	}
	.moneyBox{
		width: 90%;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 2rpx solid red;
		margin: 20rpx 5%;
		text-align: center;
		font-size: 42rpx;
		font-weight: bold;
		color: red;
	}
	.tips{
		font-size: 30rpx;
		color: #bebebe;
		text-align: center;
		font-weight: normal;
	}
	.withdraw button{
		width: 90%;
		margin: 20rpx 5%;
		margin-top: 40rpx;
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
		border: none;
		background: #007AFF;
		color: #fff;
	}
	.withdraw button::after{
		border: none;
	}
	.cancel{
		position: absolute;
		top: -20rpx;
		right: -20rpx;
		background: #fff;
		border-radius: 50%;
		z-index: 999;
		
	}
.wanlgroups-user-container {
	&__head {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;

		.background {
			position: absolute;
			left: 0;
			right: 0;
			z-index: 1;

			.bgcolor {
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.4);
			}
		}

		.navigater {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			left: 0;
			right: 0;
			z-index: 9;
			padding-left: 25rpx;
			padding-right: 25rpx;
			/* #ifdef MP */
			padding-right: 220rpx;
			/* #endif */
			& > view {
				display: flex;
				align-items: center;
			}
		}
	}

	&__main {
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position-y: center;
		.text-white-agba {
			color: rgba(255, 255, 255, 0.9);
		}
		.head {
			padding: 0 30rpx;
			padding-bottom: 50rpx;
			background-color: rgba(0, 0, 0, 0.4);

			.userinfo {
				display: flex;
				align-items: center;
				.cu-avatar {
					width: 130rpx;
					height: 130rpx;
				}
			}

			.findinfo {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.quantity {
					display: flex;
					.project {
						width: 100rpx;
						margin-right: 10rpx;
						overflow: hidden;
					}
				}
			}

			.shopinfo {
				display: flex;
				align-items: center;
				justify-content: space-between;
				&.solid-top {
					&::after {
						border-top: 1rpx solid rgba(255, 255, 255, 0.92);
					}
				}
				.cu-avatar {
					background-color: rgba(0, 0, 0, 0.1);
					width: 65rpx;
					height: 65rpx;
				}
				.subject {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.info {
						& > view {
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}
	}

	&__list {
		margin-top: -30rpx;
		border-radius: 24rpx 24rpx 0 0;
		padding-top: 2rpx;
		.questionbag {
			position: -webkit-sticky;
			position: sticky;
			z-index: 99;
			margin: 0 16rpx;
		}
		.main {
			.empty {
				padding-top: 100rpx;
				display: flex;
				justify-content: center;
				image {
					width: 320rpx;
					height: 320rpx;
				}
			}
			.list {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 0 16rpx;
				justify-content: space-between;
				.item {
					margin-bottom: 40rpx;
					flex: 0 0 calc((100% - 16rpx) / 2);
					overflow: hidden;
					.examine {
						height: 460rpx;
						position: relative;
						.cover {
							height: 460rpx;
							background-size: cover;
							background-position: center;
							background-repeat: no-repeat;
						}
						.state {
							position: absolute;
							top: 0;
							right: 0;
							left: 0;
							bottom: 0;
							background-color: rgba(0, 0, 0, 0.2);
						}
					}
				}
			}
		}
	}

	&__modal {
		.praised {
			.cu-dialog {
				width: 70%;
				overflow: hidden;
				image {
					height: 100%;
				}
			}
		}
	}
}
</style>
